 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>绿地中央广场综合物业办公系统 - 基础表格</title>
    <meta name="keywords" content="绿地中央广场综合物业办公系统">
    <meta name="description" content="绿地中央广场综合物业办公系统">

    <link rel="shortcut icon" href="favicon.ico"> 
    	<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    
</head>

<body class="gray-bg">
	<div class="wrapper2 wrapper-content2 animated fadeInRight">
    		<div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>年龄信息</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>性别信息</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
	</div>       
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
     <script src="js/plugins/select/bootstrap-select.min.js"></script>
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
	<script src="js/plugins/echarts/echarts-all.js"></script>
   <script>
	$(document).ready(function() {
		// 设置按钮的样式
		$('.selectpicker').selectpicker('setStyle', 'btn-white').selectpicker('setStyle', 'btn-sm');

		loadAge();
		function loadAge() {
            $.getJSON("/employee/ageDistributionList",function (response) {
                var dataName = [];
                var dataNum = [];
                $(response).each(function () {
                    dataName.push(this.name);
                    dataNum.push(this.count);
                });
                showAge(dataName,dataNum);
            })
        }

        function showAge(dataName,dataNum) {
            var option2 = {
                title: {
                    text: '公司员工年龄分布'
                },
                tooltip: {},
                legend: {
                    data: ['人']
                },
                xAxis: {
                    data: dataName,
                },
                yAxis: {
                    type: 'value',
                    name: '人数',
                    splitNumber: 5
                },
                series: [{
                    //折线上数字
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter:100
                        }
                    },
                    //顶上小图标名称
                    name: '人数',
                    type: 'bar',
                    barWidth: 20,
                    data: dataNum,

                    //平均值
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    },

                }]
            };
            var myChart = echarts.init(document.getElementById('echarts-line-chart'));
            myChart.setOption(option2);
        }

        loadSex();
        function sexShow(dataName,dataNum) {
            //饼状图
            var option = {
                title: {
                    text: '公司性别分布',
                    subtext: '人数',
                    x: 'center',
                    //背景色
                    //backgroundColor:'rgba(12,121,123,0.1)'
                },
                tooltip: {},
                series: [{
                    name: '详情',
                    type: 'pie',

                    //饼状图的大小
                    //radius : '55%',

                    center: ['50%', '60%'],
                    data: (function() { //饼状图需要函数解析数字内的值
                        var res = [];
                        var len = dataName.length;
                        while(len--) {
                            res.push({
                                name: dataName[len],
                                value: dataNum[len]
                            });
                        }
                        return res;
                    })()
                }]
            }
            var myChart = echarts.init(document.getElementById('echarts-bar-chart'));
            myChart.setOption(option);
        }

        function loadSex() {
            $.getJSON("/employee/sexNumberList",function (response) {
                var dataName = [];
                var dataNum = [];
                $(response).each(function () {
                    dataName.push(this.esex);
                    dataNum.push(this.number);
                });
                sexShow(dataName,dataNum);
            })
        }
	});
    </script>
    
</body>


</html>
